<template>
	<om-page :title="pageTitle">
		<view class="om_hd_fix">
			<uni-search-bar 
			bgColorCls="bg-steelblue" 
			cancelColor="text-white"
			 :focus="focus" 
			 :placeholder="placeholder" 
			 @cancel="cancel"
			 @confirm="confirm" >
			</uni-search-bar>
			<view class="page__bd" style="background-color: #FFFFFF; font-size: 15px; display: flex; width:100%;height:40px;line-height:80rpx;">
				<view  class=""  style="width: 250rpx;margin-left:110rpx; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
					{{'表单编码'}}
				</view>
				<view  class=""  style="margin-left:38rpx; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
					{{'制表人'}}
				</view>
			</view>
		</view>
		<view class="page__bd" style="padding-top: 180rpx;"></view>
		<checkbox-group v-if="datas"  style="padding-left: 15px">
			<scroll-view :style="{height:checkBoxHieght + 'vh'}" scroll-y="true"  @scrolltolower="scrolltolower">
				<view style="display: flex; flex-flow:row wrap;">
					<label v-for="(item, index) in datas" :key="index" style="width:100%;border-bottom:1px solid #eee8e9 ;">
						<view class="institution-dataList">
							<view class=""  @click="itemtap(item,index)">
								<checkbox
								 class='blue'
								 :class="item.checked?'checked':''"
								 :disabled="false"
								 :checked="item.checked"/>
							</view>
							<view v-if="item[namefield]" class="institution-name">
								<view class=""  style="height:35rpx;width: 250rpx; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
									{{  getName(item) }}
								</view>
							</view>
							<view v-if="item[namefield]" class="institution-name">
								<view class="" :style="{'max-width':(url?630:330)+'rpx'}" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
									{{  getNote(item) }}
								</view>
							</view>
							<view class="institution-name"  :animation="currentIndex == index ?animationData:''" @click="arrowClick(item,index)">
							   <uni-icons :size="20" class="uni-icon-wrapper" :class="[item.showSubData?'showSubData':'']" color="#bbb" type="arrowdown" />
							</view>
							<view  class="institution-detail">
								<view @click="showAll(item)" class="" :style="{'max-width':(url?630:330)+'rpx'}" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
									{{ '详情' }}
								</view>
							</view>
						</view>
						<view class="uni-container" v-show="item.showSubData">
							<uni-table @selection-change="subChange($event,index)" ref="table" :loading="false" border stripe type="selection" emptyText="暂无更多数据" >
								<uni-tr>
									<uni-th align="left" v-for="(subFieldItem,subFieldIndex) in subField" :key="subFieldIndex">{{subFieldItem.title}}</uni-th>
								</uni-tr>
								<uni-tr  v-for="(subItem, subIndex) in item.subData" :key="subIndex">
									<uni-td   v-for="(subFieldItem,subFieldIndex) in subField" :key="subFieldIndex">{{subItem[subFieldItem.field]}}</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</label>
				</view>
				<view class="institution-dataList">
					
				</view>
			</scroll-view>
		</checkbox-group>
		<view class="foot">
			<view class="foot-right" >
				<view class="foot-right-button om-btn-color" @click="confirmClick">
					{{'确定'}}
				</view>
			</view>
		</view>
	</om-page>
</template>


<script>
	export default {
		data() {
			return {
				pageTitle:"搜索",
				placeholder:"关键字查找",
				focus:false,
				showAllSelectBtn:false,
				datas:[],
				namefield:"code",//保证正确，显示属性,列标题,
				valuefield:"code",  // 唯一标识
				rightValueField:'', //验证重复
				namesplit:"|",//间隔符
				notefield: "zuserName",//保证正确，显示属性，列副标题
				notesplit:"|",//间隔符
				extrafield: "zuserName",//保证正确，显示属性，列右侧提示
				extrasplit:"|",//间隔符,
				url:'formRelationShipColumn/search',
				subUrl:'formRelationShipColumn/searchSub',
				leftFormCode:'',
				rightFormCode: '',
				mainId:'',
				page:1,
				rows:15,
				totalPage:0,
				searchValue:'',
				selectList:[],
				searchBottom:false,
				currentIndex:'',
				animationData:{},
				subField:[],
				checkBoxHieght:0,
				// tableData:[
				// 	{
				// 	    "date": "2020-09-01",
				// 	    "name": "Dcloud1",
				// 	    "address": "上海市普陀区金沙江路 1518 弄"
				// 	}, {
				// 	    "date": "2020-09-02",
				// 	    "name": "Dcloud2",
				// 	    "address": "上海市普陀区金沙江路 1517 弄"
				// 	}, {
				// 	    "date": "2020-09-03",
				// 	    "name": "Dcloud3",
				// 	    "address": "上海市普陀区金沙江路 1519 弄"
				// 	}, {
				// 	    "date": "2020-09-04",
				// 	    "name": "Dcloud4",
				// 	    "address": "上海市普陀区金沙江路 1516 弄"
				// 	}
				// ]
			}
		},
		computed:{
			
		},
		methods:{
			scrolltolower(){
				let _that = this
				if(_that.page < _that.totalPage){
					_that.page++
					_that.showLoading()
					if(_that.searchValue){
						_that.searchBottom = true
						_that.getData({value:_that.searchValue},'search')
					}else{
						_that.getData()
					}
				}
			},
			showAll(item){
				this.om.getFormInfo(item.id,item.busCode,false,()=>{},true)
			},
			confirmClick(){
				let _that = this
				for(let item of _that.selectList){
					let dataList = []
					for(let subIndex in item.subData){
						if(item.subData[subIndex].checked){
							_that.$set(item.subData[subIndex],'sourceForm',item.sourceForm || item.busName)
							_that.$set(item.subData[subIndex],'sourceFormId',item.sourceFormId || item.id)
							_that.$set(item.subData[subIndex],'sourceFormCode',item.sourceFormCode || item.code)
							_that.$set(item.subData[subIndex],'sourceFormBusId',item.busId)
							_that.$set(item.subData[subIndex],'sourceFormBusCode',item.busCode)
							_that.$set(item.subData[subIndex],'sourceSubFormId',item.subData[subIndex].id)
							if(item.subData[subIndex].id){
								delete item.subData[subIndex].id
							}
							dataList.push(item.subData[subIndex])
						}
					}
					item.subData = dataList
				}
				try {
					uni.setStorageSync('chooseData',_that.selectList);
				} catch (e) {
					// error
				}
				uni.navigateBack()
			},
			showLoading(){
				uni.showLoading({
					mask: true,
					title: '请稍候...'
				})
			},
			hideLoading(){
				uni.hideLoading()
			},
			findRelationCol(){
				let _that = this
				_that.om.request(
					'formRelationShipColumn/findRelationCol',
					{
						leftFormCode: _that.leftFormCode,
						rightFormCode: _that.rightFormCode,
						isSub: true
					},
					'',
					true
				).then(res=>{
					if(res.succeed){
						let list = res.value
						let obj = res.value.filter(ele => ele.sameFlag == true)
						_that.rightValueField = obj[0]?obj[0].rightValueField:''
					}
				})
			},
			getTbusinessId(){
				let _that = this
				_that.om.request(
					'formRelationShipColumn/getTbusinessId',
					{
						formCode: _that.rightFormCode
					},
					'',
					true
				).then(res=>{
					if(res.succeed){
						_that.getRelateGridModel(res.value,true)
					}
				})
			},
			getRelateGridModel(id,isSub){ //获取子表列标题
				let _that = this
				_that.om.request(
					'formFieldToOrg/getRelateGridModel',
					{
						formId: id,
						issubField: isSub
					},
					'',
					true 
				).then(res=>{
					if(res.succeed){
						let list = res.value.frozenColumns[0]
						_that.subField = list.concat(res.value.columns[0])
						_that.getData()
						_that.findRelationCol()
					}
				})
			},
			getSubData(item,index){
				let _that = this
				_that.om.request(
					'formRelationShipColumn/searchSub',
					{
						leftFormCode: _that.leftFormCode,
						rightFormCode: _that.rightFormCode,
						mainId: item.id,
						page: 1,
						rows: 100
					}
				).then(res=>{
					if(res.succeed){
						_that.$set(item,'subData',res.value)
						_that.$nextTick(function(){
							if(index + ''){
								_that.$refs.table[index].selectionAll()
							}
						})
					}
				})
			},
			arrowClick(item,index){
				//判断是否展开
				if(!item.checked){
					this.om.toast('选中后可查看')
					return
				}
				this.currentIndex = index
				if(item.showSubData){
					//标记未展开
					item.showSubData = false;
				 }else{
					item.showSubData = true;
					if(item.subData.length == 0){
						this.getSubData(item)
					}
					//显示隐藏的内容
				}
			},
			verifySelectNum:function(){
				if(this.maxSelectNum  && this.selectItemList.length >= this.maxSelectNum){
					this.om.toast(this.maxSelectTip);
					return false;
				}else{
					return true;
				}
			},
			cancel(){
				let _that = this
				_that.page = 1
				_that.searchValue = ''
				_that.datas = []
				_that.selectList = []
				_that.getData()
			},
			setChecked(item,index){
				let _that = this
				_that.selectList.push(item)
				_that.$set(item,'checked',true)
				_that.$set(item,'showSubData',true)
				if(item.subData.length == 0){
					_that.getSubData(item,index)
				}else{
					_that.$refs.table[index].selectionAll()
				}
			},
			itemtap(item,index) {
				let _that = this
				if(!item.checked){
					if(_that.selectList.length > 0){
						if(_that.selectList[0][_that.rightValueField] == item[_that.rightValueField]){
							_that.setChecked(item,index)
						}else{
							_that.om.toast('所选单据不符合配置的相同项条件')
						}
					}else{
						_that.setChecked(item,index)
					}
				}else{
					let arr = _that.selectList.map(e=>e[this.valuefield])
					let selectIndex = ''
					selectIndex = this._.indexOf(arr,item[this.valuefield])
					if(selectIndex+''){
						_that.selectList.splice(selectIndex,1)
					}
					_that.$refs.table[index].clearSelection() 
					_that.$set(item,'checked',false)
					item.showSubData = false
				}
			},
			subChange(event,parentIndex){
				let _that = this
				let item = _that.datas[parentIndex]
				let arr = []
				for(let index in item.subData){
					if(event.detail.index.indexOf(Number(index)) != -1){
						_that.$set(item.subData[index],'checked',true) 
					}else{
						_that.$set(item.subData[index],'checked',false) 
					}
				}
			},
			confirm(e){
				let _that = this
				_that.page = 1
				_that.searchValue = e.value
				_that.animationData = []
				_that.currentIndex = ''
				_that.datas = []
				_that.selectList = []
				_that.getData(e,'search')
			},
			getName(item){
				let s = ""
				if(this.namefield){
					let arr = this.namefield.split(this.namesplit)
					if(arr.length){
						arr.forEach(e => {
							if(item[e] != null && item[e] != undefined){
								if(s){
									s += " " + this.namesplit + " " + item[e]
								} else {
									s += item[e]
								}
							}
						})
					}
				}
				return s
			},
			getNote(item){
				let s = ""
				if(this.notefield){
					let arr = this.notefield.split(this.notesplit)
					if(arr.length){
						arr.forEach(e => {
							if(item[e] != null && item[e] != undefined){
								if(s){
									s += " " + this.notesplit + " " + item[e]
								} else {
									s += item[e]
								}
							}
						})
					}
				}
				return s
			},
			getData(e,type){
				let _that = this
				let obj = {
						leftFormCode:this.leftFormCode,
						rightFormCode:this.rightFormCode,
						page: this.page,
						rows: this.rows,
						searchValue:''
					}
					obj.searchValue = e?e.value:''
				_that.om.request(
					this.url,
					obj,
					'',
					true
				).then(res=>{
					_that.hideLoading()
					if(type =='search'){
						if(res.rows){
							let list = res.rows.map(item=>{
								return{
									...item,
									showSubData:false, //展示子表数据
									subData:[] //子表数据
								}
							})
							if(_that.page != 1){
								_that.datas.push(...list)
							}else{
								_that.datas = list
							}
							_that.totalPage = res.totalPage
						}
					}else{
						if(res.rows){
							let list = res.rows.map(item=>{
								return{
									...item,
									showSubData:false, //展示子表数据
									subData:[] //子表数据
								}
							})
							if(_that.page != 1){
								_that.datas.push(...list)
							}else{
								_that.datas = list
							}
							_that.totalPage = res.totalPage
						}
					}
				})
			},
		},
		onShow() {
			let _that = this
			uni.getSystemInfo({
				success: function (res) {
					_that.checkBoxHieght =   (1-(140/res.screenHeight).toFixed(4))*100
				}
			})
		},
		onLoad() {
			let _that = this
			const eventChannel = _that.getOpenerEventChannel();
			_that.showLoading()
			eventChannel.on('getCodes', function(data) {
				_that.rightFormCode = data.rightFormCode
				_that.leftFormCode = data.leftFormCode  
				_that.om.request(
					'formRelationShipColumn/getTbusinessId',
					{
						formCode: _that.rightFormCode
					},
					'',
					true 
				).then(res=>{
					if(res.succeed){
						_that.getRelateGridModel(res.value,true)
					}
				})
			})
		},
		
	}
	
</script>

<style>
	.scroll-Y {
		/* top: 0; */
		/* position: fixed; */
		z-index: 10;
		background-color: white;
		box-shadow: 0 1px 10px #929191; /*for Android*/
		-webkit-box-shadow: 0px 1px 10px #b3b2b2; /*for IOS*/
	}
		.institution-dataList{
			height:100rpx;
			display: flex; 
			flex-direction:row; 
			align-items: center;
		}
		.institution-name{
			line-height:32rpx;
			font-size:32rpx; margin: 20rpx;
		}
		.institution-detail{
			color: blue;
			line-height:32rpx;
			font-size:32rpx;
			margin-left: auto;
			margin-right: 20px;// 合适即可;
		},
		.foot{
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
			z-index: 9999;
			width: 100%;
			height: 100rpx;
			box-shadow: 0px -4px 5px #c8c8c8;
		}
		.foot-left{
			display: flex; flex-direction: column;  position: absolute;left: 0; width:70%;height: 100%;
		}
		.foot-left text{
			margin-left: 20rpx;
		}
		.foot-left-top{
			font-size: 32rpx;
			font-weight: 600;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		} 
		.foot-left-bottom{
			font-size: 25rpx;color:#666666;
			text-align: left;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			direction: rtl;
			unicode-bidi: bidi-override;
		}
		.foot-right{
			display:flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 0; 
			width:30%;
			height: 100%;
		}
		.foot-right-button{
			border-radius: 13rpx;
			 color: #FFFFFF;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 flex-direction:column;
			 width: 90%;
			 height: 70%;
		}
		.showSubData{
			transform: rotate(-180deg);
			transition-duration: 0.3s
		}
		
</style>